<template>
    <div >
        <div class="box"></div>
    <div class="signIn">
        <div class="signIn_top">
            <img src="../../assets/images/cha.png" alt="" class="signIn_top_img" @click="close">
            <span class="signIn_top_left">普通登陆</span>
            <span class="signIn_top_right">手机登录</span>
        </div>
        <div class="signIn_mid">
            <div class="signIn_mid_top">
                <img src="../../assets/images/yonghuhui.png" alt="">
                <input type="text" placeholder="请输入账号" id="inpName" v-model="userId">
            </div>
            <div class="signIn_mid_bottom">
                <img src="../../assets/images/suo.png" alt="">
                <input type="password" placeholder="请输入密码" id="inpPassword" v-model="userPassword">
            </div>
        </div>
        <div class="signIn_bottom">
            <div class="signIn_bottom_button" @click="loginTo">登陆</div>
            <div class="signIn_bottom_content">
                <div>立即注册！</div>
                <div>忘记密码？</div>
            </div>
        </div>
        <div v-if="this.answer==0" class="log_answer">登陆成功</div>
        <div v-else-if="this.answer!=0" class="log_answer">登录失败，账号或密码错误</div>
    </div>

    </div>
</template>

<script>
    import {getLogin,userInfo} from '../../api/Tlmusic'
    export default {
        name: "Login",
        props:{
            flag:Boolean
        },
        data(){
            return{
                userId:'',
                userPassword:'',
                answer:'',
                userInfo:{}
            }
        },
        methods:{
            close(){
                this.$store.commit("alertBuyCar", {flag:false})
            },
            loginTo(){
                getLogin(this.userId,this.userPassword,false).then(res=>{
                    console.log(res)
                    this.answer = res.code
                    if (res.code == 0) {
                        console.log('登陆成功')
                        this.$store.commit("changelogin", {isLogin: true})
                        console.log(this.$store.state.isLogin)
                        userInfo().then(res=>{
                            console.log(res)
                            this.userInfo = res.userInfo
                            this.$store.commit('changelogin',{userInfo:this.userInfo,isLogin:true})
                        })
                    }
                })

            }
        },



    }
</script>

<style scoped>
    /* 弹出的登录框 */
    /* 整体 */

    .signIn{
        position: absolute;
        width: 22%;
        left: 37%;
        top: 150px;
        padding: 35px;
        background-color: white;
        /*display: none;*/
        z-index: 10;
        /* : ; */
    }
    /* 头部 */
    .signIn_top{
        position: relative;
    }
    .signIn_top>span{    display: inline-block;
        height: 48px;
        line-height: 48px;
        width: 49%;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
    }
    .signIn_top_img{position: absolute;
        top: 0px;
        right: 0px;
        cursor: pointer;
    }
    .signIn_top_left{
        color: #00cf8c;
        border-bottom: 2px solid #00cf8c;
    }

    /* 输入框 */
    .signIn_mid{margin-top: 12px;}
    .signIn_mid>div>input{
        width: 100%;
        text-indent: 2em;
        height: 30px;
        line-height: 30px;
    }
    .signIn_mid_top{position: relative;}
    .signIn_mid_top>img{position: absolute;
        top: 7px;
        left: 8px;
    }
    .signIn_mid_bottom{margin-top: 30px;}
    .signIn_mid_bottom{position: relative;}
    .signIn_mid_bottom>img{position: absolute;
        top: 7px;
        left: 8px;
    }


    /* 登录按钮 */
    .signIn_bottom{
        width: 102%;
        height: 35px;
        background-color: #00cf8c;
        color: white;
        cursor: pointer;
        line-height: 35px;
        font-size: 14px;
        text-align: center;
        margin-top: 30px;
    }


    /* 底部文字 */
    .signIn_bottom_content>div:nth-of-type(1){float: left;}
    .signIn_bottom_content>div:nth-of-type(2){
        float: right;
    }
    .signIn_bottom_content{
        font-size: 14px;
        color: #595959;
        cursor: pointer;
    }

/*    登陆结果*/
    .log_answer{
        height: 20px;
        line-height: 20px;
        border: 1px solid #888888;
        background-color: lightgoldenrodyellow;
        position: absolute;
        top: 2%;
        left: 38%;
        /*margin: 0 auto;*/
        z-index: 10 ;
    }
</style>